<template>
    <!-- 备案 -->
    <div class="app-container">
        <div class="recordTop" v-show="false">
            <el-row>
                <el-col class="recordTopCol" :span="8">
                    <div>
                        <div class="recordTopTitle">建筑垃圾处理方案备案流程</div>
                        <div class="recordTopImg"> 
                            <img src="@/assets/images/ba1.jpg"/>
                        </div>
                        <div class="recordTopDesc">完整的建筑垃圾处理方案备案流程指南，确保您的项目符合环保要求。</div>
                        <el-button type="primary" class="recordTopBtn" @click="toAdd">申报</el-button>
                    </div>
                </el-col>
                <el-col class="recordTopCol" :span="8">
                    <div>
                        <div class="recordTopTitle">建筑垃圾排放核准延期或变更流程</div>
                        <div class="recordTopImg">
                            <img src="@/assets/images/ba2.jpg"/>
                        </div>
                        <div class="recordTopDesc">了解如何申请延期或变更建筑垃圾处理方案，保持您的项目合规性。</div>
                        <el-button type="primary" class="recordTopBtn" @click="toDesc">查看详情</el-button>
                    </div>
                </el-col>
                <el-col class="recordTopCol" :span="8">
                    <div>
                        <div class="recordTopTitle">目前备案中的工地记录统计</div>
                        <div class="recordTopImg">
                            <div ref="siteEcharts" class="siteEcharts" style="width: 100%; height: 100%;"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="recordContent">
            <div class="" style="font-size: 18px; font-weight: bold; margin-bottom: 15px;">搜索条件</div>
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                label-width="120px"
                >
                <!-- <el-form-item label="审核状态" prop="state">
                    <el-select
                    v-model="queryParams.state"
                    clearable
                    >
                        <el-option
                            v-for="(v,index) in stateList"
                            :key="index"
                            :label="v.label"
                            :value="v.value"
                        ></el-option>
                    </el-select>
                </el-form-item> -->

                <el-form-item label="施工工地名称" prop="name">
                    <el-input
                        v-model="queryParams.name"
                        placeholder="请输入施工工地名称"
                        clearable
                        @keyup.enter.native="handleQuery"
                        />
                </el-form-item>
                <el-form-item label="申报时间" prop="time">
                    <el-date-picker clearable
                        v-model="queryParams.time"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择申报人时间">
                        </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button type="primary" class="recordTopBtn" @click="toAdd" style="margin-left: 10px;">申报</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="recordTable">
            <el-table
                border
                fit
                highlight-current-row
                empty-text="暂无数据"
                v-loading="loading"
                :data="dataList"
                >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="申报编号" align="center" prop="sbbh" />
                <el-table-column label="工地名称" align="center" prop="name" />
                <el-table-column label="申报单位" align="center" prop="sbdw" />
                <el-table-column label="工程类别" align="center" prop="gclb" />
                <el-table-column label="工程地址" align="center" prop="gcdz" />

                <el-table-column label="申报时间" align="center" prop="sbTm" />
                <!-- <el-table-column label="审核状态" align="center" prop="state" /> -->
                
                <el-table-column
                    label="操作"
                    width="120"
                    align="center"
                    fixed="right"
                    class-name="small-padding fixed-width"
                >
                    <template slot-scope="scope">
                        <!-- <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['construction:site:edit']"
                        >修改</el-button> -->
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-info"
                            @click="handleDesc(scope.row, scope.$index)"
                            v-hasPermi="['construction:info:query']"
                        >查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            
            <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
        </div>
        <!-- <div class="recordTop">
            <div></div>
        </div> -->
  
    </div>
  </template>
  
  <script>
    import * as echarts from 'echarts'
    

  export default {
    name: "Record",
    components: {  },
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          state: '',
          name: '',
          time: '',
        },
        total: 3,
        dataList: [{
            id: 1,
            sbbh: "No1",
            name: "西兆通4号地中学项目",
            sbdw: "河北云海货物运输有限公司",
            gclb: "房屋建筑工地",
            gcdz: "河北省石家庄市长安区富强路",
            sbTm: "2025-01-01",
        }, {
            id: 2,
            sbbh: "No2",
            name: "太平河38/地",
            sbdw: "河北云海货物运输有限公司",
            gclb: "拆迁土地",
            gcdz: "河北省石家庄市长安区",
            sbTm: "2025-01-01",
        }, {
            id: 3,
            sbbh: "No3",
            name: "太平河69/地", 
            sbdw: "河北云海货物运输有限公司",
            gclb: "收储工地",
            gcdz: "河北省石家庄市长安区",
            sbTm: "2025-01-01",
        }],
        loading: false,
        stateList: [],
        chart: null,
      };
    },
    mounted() {
        this.getEchartsData()
            
    },
    methods: {
        handleQuery(){
            // this.getEchartsData()

        },
        getList(){
            console.log(this.queryParams)
        },
        getEchartsData(){
            this.chart = echarts.init(this.$refs.siteEcharts, "macarons")

            this.chart.setOption({
                title : {
                    text: '消纳场所',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                calculable : true,
                series : [
                    {
                        name:'区域',
                        type:'pie',  
                        // center: ['50%', '60%'],
                        radius: ['40%', '60%'], // 设置内半径和外半径，这里设置饼图大小
                        data:[
                            {value:15, name:'待整改'},
                            {value:8, name:'待审核'},
                            {value:42, name:'已完成'},
                            {value:12, name:'审核中'}
                        ]
                    }
                ]

            })
        },
        toAdd(){
            this.$router.push({path: '/record/add'})
        },
        toDesc(){
            this.$router.push({path: '/record/recordList'})
        },
        handleDesc(val, index){
            this.$router.push({path: '/record/detail', query: { id: index, detail: val }})
        }
    }
  };
  </script>
  
  <style scoped lang="scss" >
  .recordTop{
    .recordTopCol{
        padding: 10px;
    }
    .recordTopTitle{
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: 0px;
        color: #000000;
        padding: 10px 0;
    }
    .recordTopImg{
        left: 24px;
        top: 68px;
        width: 100%;
        height: 192px;
        opacity: 1;
    }
    .recordTopDesc{
        font-size: 16px;
        font-weight: normal;
        line-height: 24px;
        letter-spacing: 0px;
        color: #4B5563;
        padding: 10px 0;
    }
    .recordTopBtn{

    }
  }
  .recordContent{
    padding: 20px;
  }
  </style>